<!--官方文档参照:https://www.heibaimeng.com/post/201-->
<!--官方文档参照:https://www.heibaimeng.com/post/201-->
//github:https://github.com/Vanessa219/vditor
//官网:https://b3log.org/vditor/
<script setup lang="ts">
import 'vditor/dist/index.css';
const props = defineProps(['content', 'typing'])
const emit = defineEmits(['save', 'toai', 'cancel', 'afterInit', 'update:content'])
import { ref, onMounted, watch, defineProps, defineEmits } from 'vue';




import Vditor from 'vditor';
import 'vditor/dist/index.css';
const isAfter = ref(false)
const isTyping = ref(false)
watch(() => props.content, () => {
    if (isAfter.value) {
        vditor.value!.setValue(props.content);
    }

})

const vditor = ref<Vditor | null>(null);

onMounted(() => {
    if (props.typing != null && props.typing == true) {
        isTyping.value = true
    }
    // new TypeIt("#vditor", {
    //     strings: "This is a simple string.",
    //     speed: 50,
    //     waitUntilVisible: true,
    // }).go();
    vditor.value = new Vditor('vditor', {
        width: 800,
        height: 600,
        icon: 'material',
        // toolbar: ['emoji', 'br', 'bold', '|', 'line'],
        theme: "classic",
        after: () => {
            isAfter.value = true
            vditor.value!.setValue(props.content);
            emit('afterInit', '')


        },

    });
});
</script>
<template>
    <div>
        <n-space vertical>
            <slot name="underBtn"></slot>
            <div id="vditor" />
        </n-space>
    </div>
</template>
  

<style></style>
  